// pages/menu/menu.js
Page({

  data: {
    // 轮播图
    imgHigth: 520,
    backgroundArr: [
      "/images/banner/menubanner1.jpg",
      "/images/banner/menubanner2.jpg",
      "/images/banner/menubanner3.jpg"
    ],
    arr: [{
        "id": 0,
        "title": "人气Top",
        "subArr": [{
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "拿铁"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "桃桃芝士红宝石"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "咖啡风味安慕希"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "陨石拿铁"
          }
        ]
      },
      {
        "id": 1,
        "title": "大师咖啡",
        "subArr": [{
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "冲绳黑糖拿铁"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "陨石拿铁"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "拿铁"
          }
        ]
      },
      {
        "id": 2,
        "title": "小鹿茶精选",
        "subArr": [{
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "标准美式"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "加浓美式"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "焦糖标准美式"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "焦糖加浓拿铁"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "银河气泡美式"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "银河气泡美式"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "银河气泡美式"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "银河气泡美式"
          }
        ]
      },
      {
        "id": 3,
        "title": "瑞纳冰",
        "subArr": [{
          "imgSrc": "/images/menu/1-1.jpg",
          "imgDesc": "乐岛桃桃冰"
        }]
      },
      {
        "id": 4,
        "title": "鲜榨果蔬汁",
        "subArr": [{
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "NFC鲜榨橙汁"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "NFC鲜榨西柚汁"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "猕猴桃复合果汁"
          }
        ]
      },
      {
        "id": 5,
        "title": "经典饮品",
        "subArr": [{
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "巧克力"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "纯牛奶"
          }
        ]
      },
      {
        "id": 6,
        "title": "健康轻食",
        "subArr": [{
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "京味烤鸭鲜蔬卷"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "夏威夷菠萝火山卷"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "火腿芝士羊角"
          },
          {
            "imgSrc": "/images/menu/1-1.jpg",
            "imgDesc": "鸡肉卷"
          }
        ]
      }
    ],
    //左边下标
    leftNmu: 0,

    leftId: 0,
    heightId: 0,
    //每项滚动相对应的高度
    rightArr: []
  },
  //点击左边事件
  clickFn(e) {
    this.setData({
      leftNmu: e.currentTarget.dataset.index,
      leftId: e.currentTarget.dataset.index,
      rightId: e.currentTarget.dataset.index
    })
  },
  onReady() {
    setTimeout(() => {
      let heightArr = [0];
      //初始值高度
      let baseNum = 0;
      let _this = this;

      const query = wx.createSelectorQuery()
      query.selectAll('.box').boundingClientRect()
      query.selectViewport().scrollOffset()
      query.exec(function (res) {
        res[0].map((val,index)=> {
          baseNum += val.height;
          heightArr.push(baseNum)
        })
        _this.setData({
          rightArr:heightArr
        })
      })
    }, 500)
  },
  //右边滚轮事件
  rightScroll(e) {
    //当前滚轮高度
    let st = e.detail.scrollTop;
    let myarr = this.data.rightArr;
    let _this = this;
    for(let i = 0; i < myarr.length; i++){
      if(st >= myarr[i] - 5 && st <= myarr[i+1] - 5){
          _this.setData({
            leftNmu: i,
            leftId: i
          })
          return
      }
    }
  }
})